<script setup>
import {reactive, ref} from "vue";

const items= ref([
  {
    image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.GjbsUpYZOqHYLeHZ9QwHpAHaHa?w=182&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    link: '#',
    text: '悦健康'
  },
  {
    image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.GjbsUpYZOqHYLeHZ9QwHpAHaHa?w=182&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    link: '#',
    text: '悦货'
  },
  {
    image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.GjbsUpYZOqHYLeHZ9QwHpAHaHa?w=182&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    link: '#',
    text: '李宁'
  },
  {
    image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.GjbsUpYZOqHYLeHZ9QwHpAHaHa?w=182&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    link: '#',
    text: '手表'
  },
  {
    image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.GjbsUpYZOqHYLeHZ9QwHpAHaHa?w=182&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    link: '#',
    text: '特步'
  },
  {
    image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.GjbsUpYZOqHYLeHZ9QwHpAHaHa?w=182&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    link: '#',
    text: '运动补给'
  },
  {
    image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.GjbsUpYZOqHYLeHZ9QwHpAHaHa?w=182&h=182&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    link: '#',
    text: '防晒'
  },
  {
    image: '/所有商品.png',
    link: '#',
    text: '所有商品'
  }
])

const goodsList = ref([
  {title: '111111', price: 888, img: 'https://img01.yzcdn.cn/vant/apple-1.jpg'},
  {title: '222222', price: 999, img: 'https://img01.yzcdn.cn/vant/apple-2.jpg'},
  {title: '333333', price: 666, img: 'https://img01.yzcdn.cn/vant/apple-3.jpg'},
  {title: '444444', price: 777, img: 'https://img01.yzcdn.cn/vant/apple-4.jpg'},
  {title: '333333', price: 666, img: 'https://img01.yzcdn.cn/vant/apple-3.jpg'},
  {title: '444444', price: 777, img: 'https://img01.yzcdn.cn/vant/apple-4.jpg'},
]);
let isLoading = ref(false);
let state = reactive({
  isRefresh: false,
  isLoading: false,
  finished: false,
  count: 1,
})
const onLoad = () => {
  console.log("load count:", state.count, "--", state.finished);
  state.count++;
  if (state.count >= 5) {
    state.finished = true;
    return;
  }
  state.isLoading = true;
  goodsList.value.push({
    title: '324', price: 888,
    img: 'https://img01.yzcdn.cn/vant/apple-1.jpg'
  });
  goodsList.value.push({
    title: '55234', price: 888,
    img: 'https://img01.yzcdn.cn/vant/apple-1.jpg'
  });
  goodsList.value.push({
    title: '324', price: 888,
    img: 'https://img01.yzcdn.cn/vant/apple-1.jpg'
  });
  goodsList.value.push({
    title: '55234', price: 888,
    img: 'https://img01.yzcdn.cn/vant/apple-1.jpg'
  });
  state.isLoading = false;
}
const onRefresh = () => {
  console.log("Refresh count:", state.count, "--", state.finished);
  state.isRefresh = true;
  state.count = 1;
  state.finished = false;
  goodsList.value =
      [
        {title: '111111', price: 888, img: 'https://img01.yzcdn.cn/vant/apple-1.jpg'},
        {title: '222222', price: 999, img: 'https://img01.yzcdn.cn/vant/apple-2.jpg'},
        {title: '333333', price: 666, img: 'https://img01.yzcdn.cn/vant/apple-3.jpg'},
        {title: '444444', price: 777, img: 'https://img01.yzcdn.cn/vant/apple-4.jpg'},
        {title: '333333', price: 666, img: 'https://img01.yzcdn.cn/vant/apple-3.jpg'},
        {title: '444444', price: 777, img: 'https://img01.yzcdn.cn/vant/apple-4.jpg'},
        {title: '333333', price: 666, img: 'https://img01.yzcdn.cn/vant/apple-3.jpg'},
        {title: '444444', price: 777, img: 'https://img01.yzcdn.cn/vant/apple-4.jpg'},
      ];
  state.isRefresh = false;
}
</script>

<template>

  <div class="main">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item class="vsi">
        <img src="../../public/uploads/back1.jpg">
      </van-swipe-item>
      <van-swipe-item class="vsi">
        <img src="../../public/轮播图2.png">
      </van-swipe-item>
      <van-swipe-item class="vsi">
        <img src="../../public/轮播图3.png">
      </van-swipe-item>
      <van-swipe-item class="vsi">
        <img src="../../public/轮播图4.png">
      </van-swipe-item>
    </van-swipe>
    <div class="category_list">
      <a v-for="(item, index) in items" :key="index" :href="item.link" target="_blank">
        <img :src="item.image" alt="image"></img>
        <span>{{ item.text }}</span>
      </a>
    </div>
    <div class="region">
      <el-row :gutter="20">
        <el-col :span="8"><div class="grid-content bg-purple">
            <span class="s1">线上马拉松</span>
            <span class="s2">不限地点齐开</span>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <span class="s1">全民体验官</span>
          <span class="s2">装备免费体验</span>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <span class="s1">悦跑鞋库</span>
          <span class="s2">我的跑鞋</span>
        </div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple">
          <span class="s1">品牌专区</span>
          <span class="s2">精选品牌和赛</span>
        </div></el-col>
      </el-row>
    </div>
    <van-pull-refresh v-model="state.isRefresh" @refresh="onRefresh">
      <!-- 使用宫格组件，实现商品的展示 -->
      <div>
        <!-- 列表内容 -->
        <van-list
            v-model="state.isLoading"
            :finished="state.finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
          <van-grid :border="true" :column-num="2" class="grid">
            <van-grid-item v-for="item in goodsList">
              <van-image with="100" height="100" :src="item.img"/>
              <p style="margin-top: 5px">{{ item.title }}</p>
              <p style="color: orange;margin-top: 2px">{{
                  item.price
                }}</p>
            </van-grid-item>
          </van-grid>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>

<style scoped>
.my-swipe{
  color: #fff;
  font-size: 20px;
  line-height: 60px;
  text-align: center;
  background-color: #39a9ed;
}

.main {
  margin-top: 120px;
  height: 500px;
}

.vsi {
  width: 100%;
  height: 100px;
}

img {
  width: 100%;
  height: 100%;
}

.category_list {
  margin: 1rem;
  display: flex;
  justify-content:space-around;
  flex-wrap: wrap;
  gap: 2rem;
}

.category_list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.category_list img {
  width: 50px; /* 调整大小 */
  height: auto;

}

.category_list span {
  margin-top: 0.5rem; /* 文字与图片之间的间距 */
}

.el-row {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
  overflow: auto;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background-color: #e5e9f2;
}
.grid-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  border-radius: 4px;
  min-height: 36px;
  /* 添加背景图片 */
  background-image: url("https://sc240701.oss-cn-beijing.aliyuncs.com/abc/1639387095212__01.jpg");
  background-size: cover; /* 调整图片大小以覆盖整个容器 */
  background-position: center; /* 居中对齐图片 */
  background-repeat: no-repeat; /* 不重复图片 */
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.s1{
  font-size: 16px;
  color:white;
}
.s2{
  font-size: 12px;
  color:rgb(153, 153, 153);
}
</style>